<template>
	<view class="main-cont">
		<view class="top box box-pack-between box-align-center padd10">
			<!-- 			<view class="">
				已评分：6人
			</view> -->
			<view class="box box-align-center box-pack-center">
				<view class="mr10">
					筛选未评分
				</view>
				<u-switch v-model="checked" :active-value="1" :inactive-value="0" @change="change()"></u-switch>
			</view>
		</view>
		<view class="mid stu-cont box box-tb box-align-center box-pack-center" v-if="stuList.length!=0">
			<view class="bottom box box-tb box-pack-start padd10" v-for="(item,i) in stuList" :key="i">
				<view class="box box-pack-between box-align-center">
					<view class="stu-info box box-pack-start box-align-center">
						<u-avatar :src="item.icon" mode="square" size="78"></u-avatar>
						<view class="box box-tb box-pack-start ml10">
							<view class="stu-name">
								{{item.userName}}
							</view>
							<view class="time">
								{{item.createTime}}
							</view>
						</view>
					</view>
					<view class="score" v-if="item.status == '1'">
						+ {{item.score}}分
					</view>
				</view>
				<view class="content">
					<view class="text">
						{{item.cont}}
					</view>
					<view class="images box box-align-start">
						<view class="item mr10" v-for="(ite,index) in item.files" :key="index"
							@click="previewImage(item.files,index)">
							<u-image :src="ite.fileSuffix=='mp4'?ite.firstFrame:ite.url" width="152rpx" height="152rpx">
								<u-loading slot="loading"></u-loading>
							</u-image>
							<u-image src="@/static/home/icon_play.png" width="40rpx" height="40rpx" class="posa"
								v-if="ite.fileSuffix =='mp4'">
								<u-loading slot="loading"></u-loading>
							</u-image>
						</view>
					</view>
				</view>
				<view class="select-list" v-if="item.status == '1'">
					<view class="list box box-align-center box-pack-between" :class="{checked:items.checked == '1'}"
						v-for="(items,key) in item.pfbzList" :key="key">
						<view class="">
							{{items.cont}}
						</view>
						<view class="">
							+ {{items.score}}
						</view>
					</view>
					<view class="box box-pack-between box-align-center mt20">
						<view class="">
							审批人：{{item.spy}}
						</view>
						<view class="reset-edit-btn" @click="handleEdit(i,item)">
							修改
						</view>
					</view>
				</view>
				<view class="select-list" v-if="item.status == '0'">
					<view class="box box-pack-between box-align-center mt20">
						<view class="">
							未评分
						</view>
						<view class="reset-edit-btn" @click="handleEdit(i,item)">
							评分
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="text-align: center;" v-else>

			<u-empty text="暂无学生提交数据" mode="list"></u-empty>
		</view>
		<view class="end box box-align-center box-pack-between" v-if="stuList.length!=0 && statusShow ==true">
			<view class="">
				未批阅：{{stuList.length}}人
			</view>
			<view class="reset-pass-btn" @click="allPass()">
				全部审核通过
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="14" height="648rpx" :safe-area-inset-bottom="true">
			<view class="box box-align-center box-pack-between title">
				<view class="">
					{{popTitle}}
				</view>
				<view class="edit-score">
					+ {{editScore}}
				</view>
			</view>
			<view class="">
				<view class="list box box-align-center box-pack-between" :class="{checked:checkedValue.includes(c.id)}"
					v-for="(c,t) in editList" :key="t" @click="checkedBox(c.id,c.score)">
					<view class="">
						{{c.cont}}
					</view>
					<view class="">
						+ {{c.score}}
					</view>
				</view>
			</view>
			<view class="box box-align-center box-pack-center">
				<view class="flex-1" @click="handleCancel()">
					取消
				</view>
				<view class="flex-2" @click="handleConfirm()">
					确定
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: uni.getStorageSync('user'),
				bj: uni.getStorageSync('clazz'),
				planid: 0,
				sjid: '',
				stuList: [],
				editList: [],
				checkRw: {}, //点击修改/评分的时候 暂存此任务
				checkedValue: [],
				tgList: [],
				status: 0,
				sx: '',
				popTitle: "",
				show: false,
				checked: false,
				editIndex: 0,
				editScore: 0,
				editScoreArr: []
			}
		},
		onLoad(opt) {
			this.planid = opt.planid;
			this.sjid = opt.sjid;
			this.pyList();
		},
		computed: {
			//全部审核显示隐藏
			statusShow: function() {
				return this.status == 1 ? true : false
			},
		},
		methods: {
			pyList() {
				console.log(uni.getStorageSync('clazz'));
				let opts = {
					url: '/yclassldsjtask/pyList',
					method: 'post'
				};
				let params = {
					sjid: this.sjid,
					planid: this.planid,
					classid: this.bj.id,
					status: this.status
				};
				this.$api.post(opts, params).then(res => {
					console.log(res);
					if (res.code == 0) {
						this.stuList = res.list;
						if (res.list.length == 0) {
							return
							uni.navigateBack({
								delta: 2
							})
						}
					}

				})
			},
			handleEdit(index, item) {
				console.log(index, item);
				this.checkRw = item;
				let opts = {
					url: '/yldsjpfbz/list',
					method: 'post'
				};
				let params = {
					ldsjid: item.sjid
				};
				this.$api.post(opts, params).then(res => {
					console.log(res);
					this.editList = res.list;
				})
				this.popTitle = "修改评分"
				this.show = true
				console.log(item, this.show);
			},
			//确定
			handleConfirm() {
				let _this = this;
				_this.show = false;
				uni.showModal({
					title: '提示',
					content: '是否确定评分？',
					success(res) {

						if (res.confirm) {
							let opts = {
								url: '/yclassldsjtask/updatePyTask',
								method: 'post'
							};
							let params = {
								ltrid: _this.checkRw.cltrid,
								trid: _this.user.id,
								ldsjid: _this.checkRw.sjid,
								trName: _this.user.name,
								pfbzids: _this.checkedValue
							};
							_this.$api.post(opts, {
								str: JSON.stringify(params)
							}).then(resp => {
								console.log(JSON.stringify(params));
								console.log(resp);
								if (resp.code == 0) {
									_this.$refs.uToast.show({
										title: '操作成功',
										type: 'success'
									})
									_this.pyList();
								} else {
									_this.$refs.uToast.show({
										title: '操作失败',
										type: 'error'
									})
								}


							})
						}
					}
				})
			},
			//全部通过
			allPass() {
				let _this = this;
				_this.tgList = [];
				this.stuList.forEach(function(item, index) {
					// if(item.status == '1'){
					_this.tgList.push(item.cltrid)
					// }
				});

				if (_this.tgList.length == 0) {
					this.$refs.uToast.show({
						title: '暂无批阅任务',
						type: 'warning'
					})
				} else {
					let opts = {
						url: '/yclassldsjtask/qbtg',
						method: 'post'
					};
					let params = {
						str: _this.tgList.toString()
					};
					this.$api.post(opts, params).then(res => {
						this.$refs.uToast.show({
							title: '操作成功',
							type: 'success'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							})
						}, 1000)

					})
				}
			},
			//筛选评分
			change(e) {
				this.status = e;
				this.pyList();
			},
			//预览图片视频
			previewImage(val, i) {
				if (val[i].fileSuffix == `mp4`) {
					uni.navigateTo({
						url: `/pageHome/video?url=` + val[i].url
					})
				} else {
					let it = JSON.stringify(val)
					uni.setStorage({
						key: 'item',
						data: it
					})
					// uni.setStorageSync("stu_preview",it);
					uni.navigateTo({
						url: `/pageHome/bjqShow?index=` + i + `&val=` + encodeURIComponent(it)
					})
				}
			},


			//评分操作
			checkedBox(id, score) {
				if (this.checkedValue.includes(id)) {
					this.checkedValue = this.checkedValue.filter(function(ele) {
						return ele != id;
					});
					//修改评分
					this.editScore = parseInt(this.editScore) - parseInt(score)
				} else {
					this.checkedValue.push(id);
					//修改评分
					this.editScore = parseInt(this.editScore) + parseInt(score)
				}
			},

			//取消
			handleCancel() {
				this.show = false
			},

		}
	}
</script>

<style scoped lang="scss">
	.main-cont {
		width: 100%;
		height: 100%;

		.top {
			height: 108rpx;
			background-color: #fff;
		}

		.stu-cont {
			margin: 20rpx auto;
			width: 722rpx;
			padding-bottom: 130rpx;

			.top {
				height: 80rpx;
				border-bottom: 2rpx solid #F0F1F8;
			}

			.bottom {
				margin-bottom: 20rpx;
				width: 100%;
				border-radius: 20rpx;
				background-color: #fff;
				box-shadow: 0px 23rpx 46rpx 0px rgba(205, 207, 230, 0.18);

				.text {
					margin-left: 96rpx;
				}

				.stu-name {
					color: #2F3142;
					font-size: 30rpx;
				}

				.time {
					color: #ABB0C4;
					font-size: 24rpx;
				}

				.score {
					color: #FF5A77;
					font-size: 30rpx;
				}

				.images {
					flex-wrap: wrap;
					margin-left: 96rpx;

					.item {
						position: relative;
						margin-bottom: 20rpx;

						.posa {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
						}
					}
				}

			}

			.select-list {}

			.reset-edit-btn {
				width: 108rpx;
				height: 48rpx;
				line-height: 48rpx;
				background: #FF5A77;
				border: 1px solid #FF5A77;
				border-radius: 24rpx;
				font-size: 26rpx;
				color: #fff;
				text-align: center;
			}
		}

		.end {
			padding: 0 30rpx;
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 130rpx;
			background-color: rgba(248, 249, 252, .9);

			.reset-pass-btn {
				width: 213rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: linear-gradient(180deg, #7686F6, #626BF1);
				box-shadow: 0px 2rpx 10rpx 0px #DADCE8;
				border-radius: 31rpx;
				text-align: center;
				font-size: 28rpx;
				color: #fff;
			}
		}
	}

	.list {
		padding: 0 30rpx;
		margin: 20rpx auto;
		width: 662rpx;
		height: 68rpx;
		line-height: 68rpx;
		background: #F5F6FF;
		border-radius: 34rpx;
		font-size: 28rpx;
		color: #AEB8CF;

		&.checked {
			color: #7F84E4;
		}
	}

	.flex-1,
	.flex-2 {
		flex: 1;
		text-align: center;
		height: 112rpx;
		line-height: 112rpx;
		font-size: 28rpx;
		background: #F8F9FC;
		color: #1C1C1C;
		font-weight: bold;
	}

	.flex-2 {
		color: #626BF1;
	}

	.title {
		padding: 0 40rpx;
		height: 128rpx;
		line-height: 128rpx;
		border-bottom: 2rpx solid #EEF4F8;
		font-size: 26rpx;
		color: #959AA5;

		.edit-score {
			color: #FF5A77;
		}
	}
</style>
